<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue水果店收银系统</title>
  <!-- 引入Vue.js -->
  <script src="../vue.js"></script>
</head>
<style>
  table {
    border: 1px solid #000;
    text-align: center;
    width: 500px;
  }

  th,
  td {
    border: 1px solid #000;
  }
</style>

<body>
  <div id="app">
    <table>
      <tr>
        <th>欢迎光临 {{ storeName }}</th>
      </tr>

      <tr>
        <th>
          <p>青果{{ price }}¥/斤，折扣{{ discount }}</p>
        </th>
      </tr>
      <tr>
        <th>
          <input type="number" v-model="quantity">
        </th>
      </tr>
      <tr>
        <th>
          <button v-on:click="checkout">结账买果~</button>
        </th>
      </tr>
      <tr>
        <th>
          <p>结账单: 总价: {{ totalPrice }}¥ 折后价: {{ discountedPrice }}¥ 省了: {{ savings }}¥</p>
        </th>
      </tr>


    </table>

  </div>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        storeName: 'vue开发的收银系统 水果店',
        fruit: '苹果',
        price: 10,
        discount: '< 8折 >',
        quantity: 0,
      },
      computed: {
        totalPrice: function () {
          return this.price * this.quantity;
        },
        discountedPrice: function () {
          if (this.discount === '< 8折 >') {
            return this.totalPrice * 0.8;
          } else {
            return this.totalPrice;
          }
        },
        savings: function () {
          return this.totalPrice - this.discountedPrice;
        }
      },
      methods: {
        checkout: function () {
          alert('总价: ' + this.totalPrice + '¥, 折后价: ' + this.discountedPrice + '¥, 省了: ' + this.savings + '¥');
        }
      }
    });
  </script>
</body>

</html>